// 在 Vue.js 中，Mixins 是一种分发 Vue 组件中可复用功能的非常灵活的方式。Mixins 可以包含组件选项（如 data、methods、created 钩子等），
// 当组件使用 Mixin 时，Mixin 中的选项将被“混合”进入组件本身的选项中。这里用于自动调整每个echart的大小
import { debounce } from '@/utils'

export default {
  data() {
    return {
      $_sidebarElm: null,
      $_resizeHandler: null
    }
  },
  mounted() {
    this.initListener()
  },
  activated() {
    if (!this.$_resizeHandler) {
      //避免重复初始化
      this.initListener()
    }
    //激活keep-alive图表时，自动调整大小
    this.resize()
  },
  beforeDestroy() {
    this.destroyListener()
  },
  deactivated() {
    this.destroyListener()
  },
  methods: {
    /**
     * 使用$_作为混入属性
     * https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
     * @param e
     */
    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.$_resizeHandler()
      }
    },
    /**
     * 初始化监听
     */
    initListener() {
      this.$_resizeHandler = debounce(() => {
        this.resize()
      }, 100)
      window.addEventListener('resize', this.$_resizeHandler)
      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    /**
     * 销毁监听
     */
    destroyListener() {
      window.removeEventListener('resize', this.$_resizeHandler)
      this.$_resizeHandler = null
      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    /**
     * 重置大小
     */
    resize() {
      const { chart } = this
      chart && chart.resize()
    }
  }
}
